<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>支付首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="hotcss" content="design-width=640 max-width=640 initial-dpr=1">
    <link href="/vendor/layui-v2.8.8/layui/css/layui.css?v={{ time() }}" rel="stylesheet">
    <script src="/vendor/layui-v2.8.8/layui/layui.js?v={{ time() }}"></script>
    @vite(['resources/scss/switch_pay/index.scss', 'resources/js/switch_pay.js'])
</head>

<body>
    <div class="container" id="vapp">
        <div class="pay-container">
            <div class="pay-header">
                支付
                <div class="close-btn" v-on:click="goBack()">
                    <svg t="1691655085303" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="10310" id="mx_n_1691655085304">
                        <path
                            d="M563.8 512l262.5-312.9c4.4-5.2 0.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9c-4.4 5.2-0.7 13.1 6.1 13.1h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
                            p-id="10311" fill="#ffffff"></path>
                    </svg>
                </div>
            </div>
            <div class="pay-content">
                <div class="order-info">
                    <div class="order-amount">￥<label class="amount">{{ sprintf("%.2f", $order->money) }}</label></div>
                    {{-- <div class="goods-name">{{ $order->goods_name }}</div> --}}
                </div>
                <div class="pay-type-box">
                    <div v-if="canYibaoPay" class="type-item" v-on:click="yibaoPay()">
                        <div class="wxpay-icon">
                            <svg t="1691651773705" class="icon" viewBox="0 0 1228 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3994">
                                <path
                                    d="M530.8928 703.1296a41.472 41.472 0 0 1-35.7376-19.8144l-2.7136-5.5808L278.272 394.752a18.7392 18.7392 0 0 1-2.048-8.1408 19.968 19.968 0 0 1 20.48-19.3536c4.608 0 8.8576 1.4336 12.288 3.84l234.3936 139.9296a64.4096 64.4096 0 0 0 54.528 5.9392L1116.2624 204.8C1004.9536 80.896 821.76 0 614.4 0 275.0464 0 0 216.576 0 483.6352c0 145.7152 82.7392 276.8896 212.2752 365.5168a38.1952 38.1952 0 0 1 17.2032 31.488 44.4928 44.4928 0 0 1-2.1504 12.3904l-27.6992 97.4848c-1.3312 4.608-3.328 9.3696-3.328 14.1312 0 10.752 9.216 19.3536 20.48 19.3536 4.4032 0 8.0384-1.536 11.776-3.584l134.5536-73.3184c10.1376-5.5296 20.7872-8.96 32.6144-8.96 6.2976 0 12.288 0.9216 18.0736 2.5088 62.72 17.0496 130.4576 26.5728 200.5504 26.5728C953.7024 967.168 1228.8 750.592 1228.8 483.6352c0-80.9472-25.4464-157.1328-70.0416-224.1024l-604.9792 436.992-4.4544 2.4064a42.1376 42.1376 0 0 1-18.432 4.1984z"
                                    fill="#15BA11" p-id="3995"></path>
                            </svg>
                        </div>
                        <div class="item-text">易宝</div>
                    </div>

                    <div v-if="canWeixinH5Pay" class="type-item" v-on:click="weixinPay()">
                        <div class="wxpay-icon">
                            <svg t="1691651773705" class="icon" viewBox="0 0 1228 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3994">
                                <path
                                    d="M530.8928 703.1296a41.472 41.472 0 0 1-35.7376-19.8144l-2.7136-5.5808L278.272 394.752a18.7392 18.7392 0 0 1-2.048-8.1408 19.968 19.968 0 0 1 20.48-19.3536c4.608 0 8.8576 1.4336 12.288 3.84l234.3936 139.9296a64.4096 64.4096 0 0 0 54.528 5.9392L1116.2624 204.8C1004.9536 80.896 821.76 0 614.4 0 275.0464 0 0 216.576 0 483.6352c0 145.7152 82.7392 276.8896 212.2752 365.5168a38.1952 38.1952 0 0 1 17.2032 31.488 44.4928 44.4928 0 0 1-2.1504 12.3904l-27.6992 97.4848c-1.3312 4.608-3.328 9.3696-3.328 14.1312 0 10.752 9.216 19.3536 20.48 19.3536 4.4032 0 8.0384-1.536 11.776-3.584l134.5536-73.3184c10.1376-5.5296 20.7872-8.96 32.6144-8.96 6.2976 0 12.288 0.9216 18.0736 2.5088 62.72 17.0496 130.4576 26.5728 200.5504 26.5728C953.7024 967.168 1228.8 750.592 1228.8 483.6352c0-80.9472-25.4464-157.1328-70.0416-224.1024l-604.9792 436.992-4.4544 2.4064a42.1376 42.1376 0 0 1-18.432 4.1984z"
                                    fill="#15BA11" p-id="3995"></path>
                            </svg>
                        </div>
                        <div class="item-text">微信</div>
                    </div>

                    <div v-if="canAliH5Pay" class="type-item" v-on:click="aliPay()">
                        <div class="alipay-icon">
                            <svg t="1711366773118" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4249">
                                <path d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z" fill="#009FE8" p-id="4250"></path>
                            </svg>
                        </div>
                        <div class="item-text">支付宝</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const app = vueCreateApp({
            data() {
                return {
                    tradeNo: '{{ $order->trade_no }}',
                    yibaoPayPlatform: 141,
                    weixinPayPlatform: 21,
                    aliPayPlatform: 11,
                    checkTradeNo: '',
                    checkTradeNoCount: 0,
                    canWeixinH5Pay: {{ $open_pay_list["wxh5_pay"] }},
                    canAliH5Pay: {{ $open_pay_list["alih5_pay"] }},
                    canYibaoPay: {{ $open_pay_list["yibao_pay"] }}
                }
            },
            mounted() {
                this.checkOrderStatusBegin(this.tradeNo)
            },
            methods: {
                yibaoPay() {
                    const _this = this
                    var params = {
                        trade_no: _this.tradeNo,
                        pay_platform: _this.yibaoPayPlatform
                    }
                    http.post('/switch_pay/click_pay', params, function(code, msg, data) {
                        if (code !== 0) {
                            layer.msg(msg)
                            return
                        }

                        var url = data.message;
                        window.location.href = url;
                    }, true);
                },
                weixinPay() {
                    const _this = this

                    // var query = "trade_no="+_this.tradeNo+"&pay_platform="+_this.weixinPayPlatform
                    // var form = document.createElement('form');
                    // form.method = 'POST';
                    // form.action = '/switch_pay/click_pay?'+query;
                    // $("body").append(form);
                    // form.submit();
                    // return;

                    var params = {
                        trade_no: _this.tradeNo,
                        pay_platform: _this.weixinPayPlatform
                    }
                    http.post('/switch_pay/click_pay', params, function(code, msg, data) {
                        if (code !== 0) {
                            layer.msg(msg)
                            return
                        }

                        var url = data.message;
                        window.location.href = url;
                    }, true);
                },
                aliPay() {
                    const _this = this
                    var params = {
                        trade_no: _this.tradeNo,
                        pay_platform: _this.aliPayPlatform
                    }
                    http.post('/switch_pay/click_pay', params, function(code, msg, data) {
                        if (code !== 0) {
                            layer.msg(msg)
                            return
                        }

                        var url = data.message;
                        window.location.href = url;
                    }, true);
                },
                goBack() {
                    if (window.Juheh5) {
                        window.Juheh5.payCb(0, 'success', JSON.stringify({}))
                    }
                },
                payOk() {
                    if (window.Juheh5) {
                        window.Juheh5.payCb(0, 'success', JSON.stringify({}))
                    }
                },
                checkOrderStatusBegin(trade_no) {
                    const _this = this

                    if (_this.checkTradeNo == trade_no) {
                        _this.checkTradeNoCount = 0
                        return
                    }
                    _this.checkTradeNo = trade_no
                    _this.checkTradeNoCount = 0

                    setTimeout(() => {
                        _this.checkOrderStatus(trade_no)
                    }, 3000);
                },
                checkOrderStatus(trade_no) {
                    const _this = this

                    // 如果当前订单与检测订单不一致
                    if (_this.tradeNo != trade_no) {
                        return
                    }

                    var params = {
                        trade_no: trade_no,
                    }
                    var url = 'https://sdk-log.tkungame.com/api/sdk/order/info'
                    http.post(url, params, function(code, msg, data) {
                        if (code !== 0) {
                            return
                        }
                        // 如果已经支付成功则关闭页面
                        if (data.status!=0 && data.status!=11) {
                            return _this.payOk()
                        }

                        // 否则等待下一秒查询
                        _this.checkTradeNoCount++
                        if (_this.checkTradeNoCount < 60) {
                            setTimeout(() => {
                                _this.checkOrderStatus(trade_no)
                            }, 2000);
                        }
                    }, false);
                }
            }
        })
        app.mount('#vapp')
    })
</script>

</html>
